<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>vfd-cloud</title>

    <!-- Custom fonts for this template-->
    <link th:href="@{/asserts/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link th:href="@{/asserts/css/sb-admin-2.min.css}" rel="stylesheet">

    <style type="text/css">
        table{
            width:70%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);/* 阴影 */
            border-collapse:collapse;/* 取消表格边框 */
            letter-spacing:1px;/* 文字缩进 */
        }
        table,th,tr,td{
            border-bottom:1px solid #dedede;/* 表格横线 */
            padding:29px;
            text-align: center;
            vertical-align: middle;
        }
        progress {
            background-color: #56BE64;
        }

        progress::-webkit-progress-bar {
            background: #ccc;
        }

        progress::-webkit-progress-value {
            background: #56BE64;
        }
        tr.focus{
            background-color: #e4f6f8;
        }
        .table>tbody>tr:hover {
            background-color: #e4f6f8;
        }
        a{text-decoration:none}
        a:hover{
            text-decoration:none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">

        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

            <!-- Sidebar - Brand -->
            <a title="主页" class="sidebar-brand d-flex align-items-center justify-content-center" href="javascript:void(0);"
                    th:onclick="enter_into_dir([[${id}]],-1*[[${id}]],0);">
                <div class="sidebar-brand-icon rotate-n-15">
                    <i class="fas fa-laugh-wink"></i>
                </div>
                <div class="sidebar-brand-text mx-3">vfd-cloud<sup>3</sup></div>
            </a>

            <!-- Divider -->
            <hr class="sidebar-divider my-0">

            <!-- Nav Item - Dashboard -->
            <li class="nav-item active">
                <a class="nav-link" href="javascript:void(0);" th:onclick="enter_into_dir([[${id}]],-1*[[${id}]],0);">
                    <i class="fas fa-fw fa-folder"></i>
                    <span>全部文件</span></a>
            </li>

            <!-- Divider 分割线-->
            <hr class="sidebar-divider">

            <!-- Heading 侧边栏-->
            <div class="sidebar-heading">
                文件
            </div>

            <!-- Nav Item - Pages Collapse Menu -->
            <li class="nav-item">
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
                   aria-expanded="true" aria-controls="collapseTwo">
                    <i class="fas fa-fw fa-folder-open"></i>
                    <span>文件分类</span>
                </a>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
                    <div class="bg-white py-2 collapse-inner rounded">
                        <h6 class="collapse-header">文件类型:</h6>
                        <a class="collapse-item" href="javascript:void(0);" th:onclick="classify([[${id}]],1);">文档</a>
                        <a class="collapse-item" href="javascript:void(0);" th:onclick="classify([[${id}]],2);">图片</a>
                        <a class="collapse-item" href="javascript:void(0);" th:onclick="classify([[${id}]],3);">视频</a>
                        <a class="collapse-item" href="javascript:void(0);" th:onclick="classify([[${id}]],4);">音频</a>
                        <a class="collapse-item" href="javascript:void(0);" th:onclick="classify([[${id}]],5);">种子</a>
                        <a class="collapse-item" href="javascript:void(0);" th:onclick="classify([[${id}]],6);">其他</a>
                    </div>
                </div>
            </li>

            <!-- Divider 分割线-->
            <hr class="sidebar-divider"/>

            <li class="nav-item">
                <a class="nav-link" href="/getAllLink">
                    <i class="fas fa-fw fa-share-alt"></i>
                    <span>我的分享</span></a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="/enterTrash">
                    <i class="fas fa-fw fa-trash-alt"></i>
                    <span>回收站</span></a>
            </li>

            <!-- Sidebar Toggler (Sidebar) -->
            <div class="text-center d-none d-md-inline">
                <button class="rounded-circle border-0" id="sidebarToggle"></button>
            </div>

        </ul>
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                    <!-- Sidebar Toggle (Topbar) -->
                    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                        <i class="fa fa-bars"></i>
                    </button>

                    <!-- Topbar Search 搜索框 -->
                    <form
                            class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                        <div class="input-group">
                            <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
                                   aria-label="Search" aria-describedby="basic-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="button">
                                    <i class="fas fa-search fa-sm"></i>
                                </button>
                            </div>
                        </div>
                    </form>

                    <!-- Topbar Navbar -->
                    <ul class="navbar-nav ml-auto">

                        <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                        <li class="nav-item dropdown no-arrow d-sm-none">
                            <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-search fa-fw"></i>
                            </a>
                            <!-- Dropdown - Messages -->
                            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                                 aria-labelledby="searchDropdown">
                                <form class="form-inline mr-auto w-100 navbar-search">
                                    <div class="input-group">
                                        <input type="text" class="form-control bg-light border-0 small"
                                               placeholder="Search for..." aria-label="Search"
                                               aria-describedby="basic-addon2">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" type="button">
                                                <i class="fas fa-search fa-sm"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </li>

                        <!-- Nav Item - User Information -->
                        <li class="nav-item dropdown no-arrow">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <!--用户名-->
                                <span id="curr_user_name" class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${username}"></span>
                                <img class="img-profile rounded-circle"
                                     src="/asserts/img/undraw_profile.svg">
                            </a>
                            <!-- Dropdown - User Information -->
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                 aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#tipModal">
                                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Profile
                                </a>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#tipModal">
                                    <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Settings
                                </a>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#tipModal">
                                    <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Activity Log
                                </a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    退出
                                </a>
                            </div>
                        </li>

                    </ul>

                </nav>
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    <div class="d-sm-flex align-items-center justify-content-between mb-4">
                        <h1 class="h3 mb-0 text-gray-800">Vfd-Cloud</h1>
                        <a href="javascript:void(0);" class="btn btn-success btn-icon-split btn-sm" data-toggle="modal" data-target="#mkdirModal">
                            <span class="icon text-white-50">
                                <i class="fas fa-folder-plus"></i>
                            </span>
                            <span class="text">新建文件夹</span>
                        </a>
                        <!--进度条部分(默认隐藏)-->
                        <div style="display: none" class="progress-body">
                            <div>
                                <span style="width: 100px; display: inline-block; text-align: right">上传进度：</span>
                                <progress></progress>
                                <percentage>0%</percentage>
                            </div>
                            <div>
                                <span style="width: 100px; display: inline-block; text-align: right">上传速度：</span>
                                <span style="width: 300px;" class="progress-speed">0 M/S, 0/0M</span>
                            </div>
                            <div>
                                <span style="width: 100px; display: inline-block; text-align: right">上传状态：</span>
                                <span style="width: 300px;" class="progress-info">请选择文件并点击上传文件按钮</span>
                            </div>
                        </div>

                        <a href="javascript:void(0);" class="btn btn-success btn-icon-split btn-sm" onclick="uploadFile();">
                                        <span class="icon text-white-50">
                                            <i class="fas fa-file-upload"></i>
                                        </span>
                            <span class="text">上传文件</span>
                        </a>

                        <form id="upload_file" style="display: none" action="/uploadFile" method="post" enctype="multipart/form-data">
                            <input type="file" id="select_file" name="select_file" multiple/><br/>
                            <label>
                                <!--当前登陆用户的id-->
                                <input type="text" name="id" th:value="${id}">
                            </label>
                            <label>
                                <!--当前文件夹的id-->
                                <input type="number" id="upload_fid" name="fid" th:value="${currentDir.getId()}">
                            </label>
                            <label>
                                <input type="text" id="upload_fName" name="fName" th:value="${currentDir.getName()}">
                            </label>
                            <label>
                                <!--目录的location-->
                                <input type="text" id="upload_location" name="location" th:value="${currentDir.getLocation()}">
                            </label>
                        </form>
                    </div>
                </div>
                <!--导航栏-->
                <div class="card shadow mb-4">
                    <div class="card-header py-3 float-left">
                        <h5 class="m-0 font-weight-bold text-primary">
                            <div class="float-left" id="guide">
                                <div class="float-left" th:each="pa:${path}">
                                    <a th:text="${pa.getName()}" href="javascript:void(0)" th:onclick="enter_into_dir([[${id}]],[[${pa.getId()}]],[[${pa.getPid()}]]);">
                                    </a> >
                                </div>
                                <div class="float-left">
                                    <p th:text="'&nbsp;' + ${currentDir.getName()}"></p>
                                </div>
                            </div>
                        </h5>
                    </div>
                    <div class="card-body card mb-4 py-3 border-left-primary">
                        <div class="table-responsive">
                            <table class="table" id="dataTable" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>文档名</th>
                                        <th>长度</th>
                                        <th>操作</th>
                                        <th>创建日期</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th>文档名</th>
                                        <th>长度</th>
                                        <th>操作</th>
                                        <th>创建日期</th>
                                    </tr>
                                </tfoot>
                                <tbody id="dir_tbody">
                                    <tr th:each="dir:${dirs}" th:id="'tr_'+${dir.getId()}+'_'+${id}+'_'+${dir.getPid()}">
                                        <td>
                                            <span class="icon">
                                                <i style="color: lightskyblue" class="fas fa-folder fa-2x"></i>
                                            </span>
                                        </td>
                                        <td>
                                            <a title="进入文件夹" th:id="'enter_tr_'+${dir.getId()}+'_'+${id}+'_'+${dir.getPid()}" href="javascript:void(0)" th:onclick="enter_into_dir([[${id}]],[[${dir.getId()}]],[[${dir.getPid()}]]);">
                                                <span class="h5 m-0 text-sm-center" th:text="${dir.getName()}"></span>
                                            </a>
                                        </td>
                                        <td><span class="h5 m-0 text-dark" th:text="--"></span> </td>         <!--文件夹长度不显示-->
                                        <td>
                                            <a title="删除" th:id="'delete_tr_'+${dir.getId()}+'_'+${id}+'_'+${dir.getPid()}" href="javascript:void(0);" data-toggle="modal" data-target="#deleteModal"
                                               th:onclick="Values([[${dir.getId()}]],[[${id}]],[[${dir.getPid()}]]);" class="btn btn-danger btn-circle">
                                                <i class="fas fa-trash-alt"></i>
                                            </a>
                                            <a title="分享" th:id="'share_tr_'+${dir.getId()}+'_'+${id}+'_'+${dir.getPid()}" href="javascript:void(0);" data-toggle="modal" data-target="#shareModal"
                                               th:onclick="Values_share([[${dir.getId()}]],[[${id}]],[[${dir.getPid()}]])" class="btn btn-primary btn-circle">
                                                <i class="fas fa-share"></i>
                                            </a>
                                        </td>
                                        <td><span class="h5 m-0 text-dark" th:text="${dir.gainTime()}"></span></td>
                                    </tr>
                                </tbody>

                                <tbody id="doc_tbody">
                                    <tr th:each="doc:${docs}" th:id="'tr_'+${doc.getId()}+'_'+${id}+'_'+${doc.getPid()}">
                                        <td>
                                            <span th:if="${doc.getType()==1}" class="icon">
                                                <i style="color: cornflowerblue" class="fas fa-file-alt fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==2}" class="icon">
                                                <i style="color: #09cb09" class="fas fa-image fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==3}" class="icon">
                                                <i style="color: blueviolet" class="fas fa-video fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==4}" class="icon">
                                                <i style="color: deeppink" class="fas fa-music fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==5}" class="icon">
                                                <i style="color: #069706" class="fas fa-file-code fa-2x"></i>
                                            </span>
                                            <span th:if="${doc.getType()==6}" class="icon">
                                                <i style="color: gray" class="fas fa-file fa-2x"></i>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="h5 m-0 text-dark" th:text="${doc.getName()}"></span>
                                        </td>
                                        <td><span class="h5 m-0 text-dark" th:text="${doc.convertToSize()}"></span></td>
                                        <td>
                                            <a title="下载" th:id="'download_tr_'+${doc.getId()}+'_'+${id}+'_'+${doc.getPid()}"
                                               th:href="@{'/download/' + ${doc.getId()}} + '/' + ${id} + '/' + ${doc.getPid()}" class="btn btn-primary btn-circle">
                                                <i class="fas fa-download"></i>
                                            </a>
                                            <a title="删除" th:id="'delete_tr_'+${doc.getId()}+'_'+${id}+'_'+${doc.getPid()}"
                                               href="javascript:void(0);" data-toggle="modal" data-target="#deleteModal"
                                               th:onclick="Values([[${doc.getId()}]],[[${id}]],[[${doc.getPid()}]]);" class="btn btn-danger btn-circle">
                                                <i class="fas fa-trash-alt"></i>
                                            </a>
                                            <a title="分享" th:id="'share_tr_'+${doc.getId()}+'_'+${id}+'_'+${doc.getPid()}"
                                               href="javascript:void(0);" data-toggle="modal" data-target="#shareModal"
                                               th:onclick="Values_share([[${doc.getId()}]],[[${id}]],[[${doc.getPid()}]])" class="btn btn-primary btn-circle">
                                                <i class="fas fa-share"></i>
                                            </a>
                                        </td>
                                        <td><span class="h5 m-0 text-dark" th:text="${doc.gainTime()}"></span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Main Content -->

            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright &copy; <a href="http://www.vfdxvffd.cn">vfdxvffd.cn</a> 2021</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->

        </div>
        <!-- End of Content Wrapper -->
    </div>
    <!-- End of Page Wrapper -->

    <div id="sub-menu" class="dropdown-menu animated--fade-in show" aria-labelledby="dropdownMenuButton"
         style="position: absolute; transform: translate3d(3px, 20px, 9px); top: 0px; left: 0px; will-change: transform;"
         x-placement="bottom-start">
        <input type="hidden" id="select_tr_id"/>
        <a id="menu_enter" class="dropdown-item" href="javascript:void(0);" onclick="enter_click()">进入文件夹</a>
        <a id="menu_download" class="dropdown-item" href="javascript:void(0);" onclick="download_click()">下载</a>
        <a id="menu_delete" class="dropdown-item" href="javascript:void(0);" onclick="delete_click()">删除</a>
        <a id="menu_share" class="dropdown-item" href="javascript:void(0);" onclick="share_click()">分享</a>
    </div>

    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>

    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="logoutModalLabel">退出登陆？</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">选择“退出”即可退出当前帐号</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" href="/logout">退出</a>
                </div>
            </div>
        </div>
    </div>

    <!-- info Modal-->
    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">In Plan</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <!--Select "Logout" below if you are ready to end your current session.-->
                <div class="modal-body">此功能正在加紧开发中...</div>
                <div class="modal-footer">
                    <!--<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>-->
                    <button class="btn btn-primary" type="button" data-dismiss="modal">确认</button>
                    <!--<a class="btn btn-primary" href="login.html">Logout</a>-->
                </div>
            </div>
        </div>
    </div>

    <!-- Share Modal-->
    <div class="modal fade" id="shareModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="shareModalLabel">分享</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="shareFileId" name="shareFileId">
                    <input type="hidden" id="shareFileOwnerId" name="shareFileOwnerId">
                    <input type="hidden" id="shareFileFid" name="shareFileFid">
                    <!--选择链接有效期-->
                    <div id="select_time">
                        <select id="cache_time">
                            <option value ="1">1天</option>
                            <option value ="3">3天</option>
                            <option value="7">7天</option>
                        </select>
                    </div>
                    <!--生成的链接和提取码-->
                    <div id="link_and_pass">

                    </div>
                </div>
                <div id="shareModalFooter" class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" href="javascript:void(0);" onclick="share_file(document.getElementById('shareFileId').value,
                                                                                              document.getElementById('shareFileOwnerId').value,
                                                                                              document.getElementById('shareFileFid').value)">生成链接</a>
                </div>
            </div>
        </div>
    </div>

    <!--delete file modal-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确定删除？</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">选择“永久删除”将永远地删除此文件，选择“移动到回收站”将把文件移动到回收站，回收站最多保存15天</div>
                    <input type="hidden" id="deleteFileId" name="deleteFileId">
                    <input type="hidden" id="deleteFileOwnerId" name="deleteFileOwnerId">
                    <input type="hidden" id="deleteFileFid" name="deleteFileFid">
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-danger" href="javascript:void(0);" onclick="delete_file(document.getElementById('deleteFileId').value,
                                                                            document.getElementById('deleteFileOwnerId').value,
                                                                            document.getElementById('deleteFileFid').value)">永久删除</a>
                    <a class="btn btn-primary" href="javascript:void(0);" onclick="move_trash(document.getElementById('deleteFileId').value,
                                                                            document.getElementById('deleteFileOwnerId').value,
                                                                            document.getElementById('deleteFileFid').value)">移动到回收站</a>
                </div>
            </div>
        </div>
    </div>

    <!-- mkdir Modal-->
    <div class="modal fade" id="mkdirModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DirModalLabel">输入文件夹名字</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body form-group">
                    <form action="/mkdir" method="POST" id="input_dir">
                        <input style="display: none" type="number" id="mkdir_uname" name="id" th:value="${id}">
                        <input style="display: none" type="number" id="mkdir_fid" name="fid" th:value="${currentDir.getId()}">
                        <input style="display: none" type="text" id="mkdir_location" name="location" th:value="${currentDir.getLocation()}">
                        <input style="display: none" type="text" id="mkdir_f_name" name="f_name" th:value="${currentDir.getName()}">
                        <input type="text" class="form-control form-control-user" id="inputDir" name="inputDir"
                               placeholder="dir name ...">
                    </form>
                </div>
                <div class="modal-body">
                    <p id="dup_dir" style="display: none">文件夹名字重复</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a onclick="mkdir();"
                       class="btn btn-primary" href="javascript:void(0)">创建</a>
                </div>
            </div>
        </div>
    </div>

    <!--文件上传失败的错误提示-->
    <div class="modal fade" id="fileUploadFailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ModalLabel">以下文件上传失败，主机发生异常或同一文件夹下命名重复：</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" id="fileUploadFail">

                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>
    <a href="javascript:void(0);" id="infoModal" style="display: none" data-toggle="modal" data-target="#fileUploadFailModal"></a>
    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/asserts/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/asserts/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    <!-- Core plugin JavaScript-->
    <script th:src="@{/asserts/vendor/jquery-easing/jquery.easing.min.js}"></script>

    <!-- Custom scripts for all pages-->
    <script th:src="@{/asserts/js/sb-admin-2.min.js}"></script>

    <!-- Page level plugins -->
    <script th:src="@{/asserts/vendor/chart.js/Chart.min.js}"></script>

    <!-- Page level custom scripts -->
    <script th:src="@{/asserts/js/demo/chart-area-demo.js}"></script>
    <script th:src="@{/asserts/js/demo/chart-pie-demo.js}"></script>

</body>
<script type="text/javascript">

    function enter_click() {
        const tr_id = document.getElementById('select_tr_id').value;
        const component = document.getElementById('enter_' + tr_id);
        component.click();
    }

    function download_click() {
        const tr_id = document.getElementById('select_tr_id').value;
        const component = document.getElementById('download_' + tr_id);
        component.click();
    }

    function delete_click() {
        const tr_id = document.getElementById('select_tr_id').value;
        const component = document.getElementById('delete_' + tr_id);
        component.click();
    }

    function share_click() {
        const tr_id = document.getElementById('select_tr_id').value;
        const component = document.getElementById('share_' + tr_id);
        component.click()
    }

    $("#sub-menu").hide()

    $(document).on("contextmenu", '#dataTable>tbody>tr', function(e){
        document.getElementById('select_tr_id').value = this.id;
        const tr_id = document.getElementById('select_tr_id').value;
        const component_enter = document.getElementById('enter_' + tr_id);
        const component_share = document.getElementById('share_' + tr_id);
        const component_delete = document.getElementById('delete_' + tr_id);
        const component_download = document.getElementById('download_' + tr_id);
        if (component_enter == null) {
            document.getElementById('menu_enter').style.display="none";
        } else {
            document.getElementById('menu_enter').style.display="block";
        }
        if (component_share == null) {
            document.getElementById('menu_share').style.display="none";
        } else {
            document.getElementById('menu_share').style.display="block";
        }
        if (component_delete == null) {
            document.getElementById('menu_delete').style.display="none";
        } else {
            document.getElementById('menu_delete').style.display="block";
        }
        if (component_download == null) {
            document.getElementById('menu_download').style.display="none";
        } else {
            document.getElementById('menu_download').style.display="block";
        }
        $("#sub-menu").show(100)
        $('#sub-menu').css({
            'top': e.pageY + 'px',
            'left': e.pageX + 'px'
        });
        return false;
    })

    $(document).on('click', function(e) {
        const evt = event.srcElement ? event.srcElement : event.target;
        if (evt.id === 'sub-menu') {
        } else {
            $('#sub-menu').hide();
        }
    });


    $(document).on('click', '#dataTable>tbody>tr', function () {
        //$(this).parent().find("tr.focus").toggleClass("focus");//取消原先选中行
        $(this).parent().parent().find("tbody>tr.focus").toggleClass("focus");//取消原先选中行
        $(this).toggleClass("focus");//设定当前行为选中行
    });

    /*当创建文件夹的模态框关闭时触发事件，让现实文件夹名字重复的p标签消失，并重置form表单*/
    $('#mkdirModal').on('hide.bs.modal', function () {
        document.getElementById('inputDir').value="";
        document.getElementById('dup_dir').style.display='none';
    });

    $('#fileUploadFailModal').on('hide.bs.modal', function () {
        document.getElementById('fileUploadFail').innerHTML="";
    });

    $('#shareModal').on('hide.bs.modal', function () {
         document.getElementById('select_time').innerHTML="<select id=\"cache_time\">\n" +
             "                            <option value =\"1\">1天</option>\n" +
             "                            <option value =\"3\">3天</option>\n" +
             "                            <option value=\"7\">7天</option>\n" +
             "                        </select>";
         document.getElementById('link_and_pass').innerHTML="";
         document.getElementById('shareModalFooter').innerHTML="<button class=\"btn btn-secondary\" type=\"button\" data-dismiss=\"modal\">取消</button>\n" +
             "                    <a class=\"btn btn-primary\" href=\"javascript:void(0);\" onclick=\"share_file(document.getElementById('shareFileId').value,\n" +
             "                                                                                              document.getElementById('shareFileOwnerId').value,\n" +
             "                                                                                              document.getElementById('shareFileFid').value)\">生成链接</a>";
    });

    function enter_into_dir(id, fid, pid) {
        var guide_con = document.getElementById('guide');
        var guide_html = "";
        var dir_con = document.getElementById('dir_tbody');
        var dir_html = "";
        var doc_con = document.getElementById('doc_tbody');
        var doc_html = "";
        $.ajax({
            type: "post",
            url: "/enterFile",
            data: {id: id, fid: fid, pid: pid},
            cache: false,
            dataType: "json",
            success: function (result) {
                var pathList = result.path;
                var dirList = result.dirs;
                var currDir = result.currentDir;
                var docList = result.docs;
                //导航栏
                //style="display: none"
                $.each(pathList, function () {
                   guide_html += "<div class=\"float-left\">"+
                       "                <a href=\"javascript:void(0)\" onclick=\"enter_into_dir("+this.owner+","+this.id+","+this.pid+");\">" +
                       "                <p>"+this.name+" ></p></a>" +
                       "</div>";
                });
                guide_html += "<div class=\"float-left\">" +
                    "        <p>&nbsp;"+currDir.name+"</p>" +
                    "    </div>";
                guide_con.innerHTML = guide_html;
                //文件夹
                //style="display: none"
                $.each(dirList, function () {
                    dir_html += dir_string(this);
                });
                dir_con.innerHTML = dir_html;
                //文件
                $.each(docList, function () {
                    doc_html += doc_string(this);
                });
                doc_con.innerHTML = doc_html;
                /*更新当前页面的信息*/
                document.getElementById('mkdir_fid').value = currDir.id;
                document.getElementById('mkdir_location').value = currDir.location;
                document.getElementById('mkdir_f_name').value = currDir.name;
                document.getElementById('upload_fid').value = currDir.id;
                document.getElementById('upload_location').value = currDir.location;
                document.getElementById('upload_fName').value = currDir.name;
            }
        });
    }

    function mkdir() {
        const tbody_dir = document.getElementById('dir_tbody');
        $.ajax({
            type: "post",
            url: "/mkdir",
            data: $('#input_dir').serialize(),
            cache: false,
            dataType: "json",
            success: function (result) {
                if (result.id === 0) {
                    document.getElementById('dup_dir').style.display='inline';
                    document.getElementById('dup_dir').style.color='red';
                    return false;
                }
                var add_html = dir_string(result);
                $('#mkdirModal').modal('hide');
                tbody_dir.innerHTML = add_html+tbody_dir.innerHTML;
                return false;
            },
            error: function (msg) {
                alert("发生错误");
                return false;
            }
        });
    }


    function uploadFile() {
        document.getElementById("select_file").click();

    }
    //监听，当上传文件的选择文件框发生变化则上传此时框中选中的文件
    $('#select_file').change(function () {
        const formData = new FormData(document.getElementById('upload_file'));
        const tbody = document.getElementById('doc_tbody');
        const modal = document.getElementById('fileUploadFail');
        let modal_html = "";
        let haveErr = false;
        $.ajax({
           type: "post",
            enctype: "multipart/form-data",
            url: "/uploadFile",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (result) {
               var add_html = "";
                $.each(result,function (){
                    if (this.type === 0 || this.type === 7) {
                        modal_html += "<p style=\"color: black\">[error]    "+this.name+"上传失败</p>";
                        haveErr = true;
                    } else {
                        add_html += doc_string(this);
                    }
                });
                tbody.innerHTML=add_html + tbody.innerHTML;
                if (haveErr) {
                    modal.innerHTML = modal_html;
                    document.getElementById('infoModal').click();
                }
            },
            xhr: function () {
               var xhr = $.ajaxSettings.xhr();
               if (xhr.upload) {
                   //处理进度条的事件
                   xhr.upload.addEventListener("progress", progressHandle, false);
                   //加载完成的事件
                   xhr.addEventListener("load", completeHandle, false);
                   //加载出错的事件
                   xhr.addEventListener("error", failedHandle, false);
                   //加载取消的事件
                   xhr.addEventListener("abort", canceledHandle, false);
                   //开始显示进度条
                   showProgress();
                   return xhr;
               }
            }
        },'json');
    });

    var start = 0;

    //显示进度条的函数
    function showProgress() {
        start = new Date().getTime();
        $(".progress-body").css("display", "block");
    }

    //隐藏进度条的函数
    function hideProgress() {
        $("#select_file").val('');
        $('.progress-body .progress-speed').html("0 M/S, 0/0M");
        $('.progress-body percentage').html("0%");
        $('.progress-body .progress-info').html("请选择文件并点击上传文件按钮");
    }

    //进度条更新
    function progressHandle(e) {
        $('.progress-body progress').attr({value: e.loaded, max: e.total});
        var percent = e.loaded / e.total * 100;
        var time = ((new Date().getTime() - start) / 1000).toFixed(3);
        if (time === 0) {
            time = 1;
        }
        $('.progress-body .progress-speed').html(((e.loaded / 1024) / 1024 / time).toFixed(2) + "M/S, " + ((e.loaded / 1024) / 1024).toFixed(2) + "/" + ((e.total / 1024) / 1024).toFixed(2) + " MB. ");
        $('.progress-body percentage').html(percent.toFixed(2) + "%");
        if (percent === 100) {
            $('.progress-body .progress-info').html("上传完成,后台正在处理...");
        } else {
            $('.progress-body .progress-info').html("文件上传中...");
        }
    };

    //上传完成处理函数
    function completeHandle(e) {
        $('.progress-body .progress-info').html("上传文件完成。");
        setTimeout(hideProgress, 2000);
    };

    //上传出错处理函数
    function failedHandle(e) {
        $('.progress-body .progress-info').html("上传文件出错, 服务不可用或文件过大。");
        setTimeout(hideProgress, 2000);
    };

    //上传取消处理函数
    function canceledHandle(e) {
        $('.progress-body .progress-info').html("上传文件取消。");
        setTimeout(hideProgress, 2000);
    };


    function Values(ID, owner, fid) {
        $('#deleteFileId').val(ID);
        $('#deleteFileOwnerId').val(owner);
        $('#deleteFileFid').val(fid);
    }

    function Values_share(ID, owner, fid) {
        $('#shareFileId').val(ID);
        $('#shareFileOwnerId').val(owner);
        $('#shareFileFid').val(fid);
    }

    //删除文件时利用ajax做异步，id为要删除的文件的id
    function delete_file(id, owner, fid) {
        $('#deleteModal').modal('hide');
        var tr = document.getElementById('tr_'+id+'_'+owner+'_'+fid);
        $.ajax( {
            type: "GET",
            url: "/delete",
            async: false,        //异步下载
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            data: {id: id, owner: owner, fid: fid},
            success: function (result) {
                if (result === "success") {
                    tr.style.display="none";
                    return false;
                } else {
                    alert("删除失败，请稍后重试！");
                }
                return false;
            },
            error: function (msg) {
                alert("发生错误");
                return false;
            }
        });
    }

    function move_trash(id, owner, fid) {
        $('#deleteModal').modal('hide');
        var tr = document.getElementById('tr_'+id+'_'+owner+'_'+fid);
        $.ajax( {
            type: "GET",
            url: "/moveToTrash",
            async: false,        //异步下载
            contentType: "application/json; charset=utf-8",
            dataType: "text",
            data: {id: id, owner: owner, fid: fid},
            success: function (result) {
                if (result === "success") {
                    tr.style.display="none";
                    return false;
                } else {
                    alert("删除失败，请稍后重试！");
                }
                return false;
            },
            error: function (msg) {
                alert("发生错误");
                return false;
            }
        });
    }

    function share_file(id, owner, fid) {
        let time = document.getElementById('cache_time').value;
        $.ajax( {
            type: "GET",
            url: "/getShareLink",
            async: false,        //异步下载
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: {id: id, owner: owner, fid: fid, time: time},
            success: function (result) {
                document.getElementById('select_time').innerHTML="";
                document.getElementById('link_and_pass').innerHTML="<form class=\"user\">\n" +
                    "    <div class=\"form-group\">\n" +
                    "        分享链接：<input readonly='readonly' type=\"text\" class=\"form-control form-control-user\" id=\"share_file_link\">\n" +
                    "    </div>\n" +
                    "    <div class=\"form-group\">\n" +
                    "        提取码：<input readonly='readonly' type=\"text\" class=\"form-control form-control-user\" id=\"share_file_pass\">\n" +
                    "    </div>\n" +
                    "</form>   ";
                document.getElementById('share_file_link').value = result.link;
                document.getElementById('share_file_pass').value = result.pass;
                document.getElementById('shareModalFooter').innerHTML = "<button class=\"btn btn-success\" type=\"button\" data-dismiss=\"modal\">完成</button>\n" +
                    "                    <a class=\"btn btn-info\" href=\"javascript:void(0);\" onclick=\"copy_share_link()\">复制链接</a>";
                return false;
            },
            error: function (msg) {
                alert("发生错误");
                return false;
            }
        });
    }

    function copy_share_link() {
        document.getElementById('share_file_link').select();
        document.execCommand("copy");
        $('#shareModal').modal('hide');
    }

    function classify(userId,type) {
        var request_url = "";
        if (type === 1) {
            request_url = "/find/document/" + userId;
        } else if (type === 2) {
            request_url = "/find/picture/" + userId;
        } else if (type === 3) {
            request_url = "/find/video/" + userId;
        } else if (type === 4) {
            request_url = "/find/audio/" + userId;
        } else if (type === 5) {
            request_url = "/find/torrent/" + userId;
        } else if (type === 6) {
            request_url = "/find/others/" + userId;
        } else {
            alert("出错了！");
        }
        var tbody = document.getElementById('doc_tbody');
        $.ajax({
            type: "GET",
            url: request_url,
            async: false,
            cache: false,
            contentType: false,
            success: function (result) {
                var add_html = "";
                $.each(result,function (){
                    add_html += doc_string(this);
                });
                document.getElementById('dir_tbody').innerHTML="";
                tbody.innerHTML=add_html;
                return false;
            },
            error: function (msg) {
                alert("发生错误");
                return false;
            }
        });
    }

    function getFileSize(fileByte) {
        var fileSizeByte = fileByte;
        var fileSizeMsg = "";
        if(fileSizeByte < 1024){
            fileSizeMsg = fileSizeByte  + "B";
        }else if (fileSizeByte < 1048576) {
            fileSizeMsg = window.parseFloat(((fileSizeByte / 1024)).toFixed(2)) + "KB";
        }else if (fileSizeByte === 1048576) {
            fileSizeMsg = "1MB";
        }else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824){
            fileSizeMsg = window.parseFloat(((fileSizeByte / (1024 * 1024))).toFixed(2)) + "MB";
        }else if (fileSizeByte > 1048576 && fileSizeByte === 1073741824){
            fileSizeMsg = "1GB";
        }else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776){
            fileSizeMsg = window.parseFloat(((fileSizeByte / (1024 * 1024 * 1024))).toFixed(2)) + "GB";
        }else{
            fileSizeMsg = "文件超过1TB";
        }
        return fileSizeMsg;
    }

    function doc_string(obj) {
        let str = "<tr id=tr_" + obj.id + '_' + obj.owner + '_' + obj.pid + "><td>";
        if (obj.type === 1) {
            str += "<span class=\"icon\">" +
                   "     <i style=\"color: cornflowerblue\" class=\"fas fa-file-alt fa-2x\"></i>" +
                   "</span>";
        } else if (obj.type === 2) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: #09cb09\" class=\"fas fa-image fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 3) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: blueviolet\" class=\"fas fa-video fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 4) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: deeppink\" class=\"fas fa-music fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 5) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: #069706\" class=\"fas fa-file-code fa-2x\"></i>\n" +
                "</span>";
        } else if (obj.type === 6) {
            str += "<span class=\"icon\">\n" +
                "    <i style=\"color: gray\" class=\"fas fa-file fa-2x\"></i>\n" +
                "</span>";
        }
        str += "</td>"+
            "<td><span class=\"h5 m-0 text-dark\">" + obj.name + "</span></td>" +
            "<td><span class=\"h5 m-0 text-dark\">" + getFileSize(obj.len) + "</span></td>" +
            "<td>" + "<a title=\"下载\" id=\"download_tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\" href=\"/download/" + obj.id + "/" + obj.owner + "/" + obj.pid + "\" class=\"btn btn-primary btn-circle\">" +
            "                                                <i class=\"fas fa-download fa-sm \"></i>" +
            "                                            </a>" +
            "<a title=\"删除\" id=\"delete_tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#deleteModal\"" +
            "                                               onclick=\"Values(" + obj.id + "," + obj.owner + "," + obj.pid + ");\" class=\"btn btn-danger btn-circle\">" +
            "                                                <i class=\"fas fa-trash\"></i>" +
            "                                            </a>" +
            "<a title=\"分享\" id=\"share_tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#shareModal\"" +
            "                                               onclick=\"Values_share(" + obj.id + "," + obj.owner + "," + obj.pid + ");\" class=\"btn btn-primary btn-circle\">" +
            "                                                <i class=\"fas fa-share\"></i>" +
            "                                            </a>" + "</td>" +
            "<td><span class=\"h5 m-0 text-dark\">" + obj.time + "</span></td></tr>";
        console.log(str);
        return str;
    }
    
    function dir_string(obj) {
        return "<tr id=\"tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\">"+
            "<td>" +
            "    <span class=\"icon\">" +
            "         <i style=\"color: lightskyblue\" class=\"fas fa-folder fa-2x\"></i>" +
            "    </span>" +
            "</td>"+
            "<td>"+
            "<a title=\"进入文件夹\" id=\"enter_tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\" href=\"javascript:void(0)\" onclick=\"enter_into_dir("+obj.owner+","+obj.id+","+obj.pid+");\">" +
            "               <span class=\"h5 m-0 text-sm-center\">"+obj.name+"</span>" +
            "           </a>" +
            "       </td>" +
            "       <td><span class=\"h5 m-0 text-dark\">--</span></td>" +
            "       <td>" +
            "           <a title=\"删除\" id=\"delete_tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#deleteModal\"" +
            "              onclick=\"Values("+obj.id+","+obj.owner+","+obj.pid+");\" class=\"btn btn-danger btn-circle\">" +
            "               <i class=\"fas fa-trash\"></i>" +
            "           </a>" +
            "           <a title=\"分享\" id=\"share_tr_"+obj.id+'_'+obj.owner+'_'+obj.pid+"\" href=\"javascript:void(0);\" data-toggle=\"modal\" data-target=\"#shareModal\"" +
            "               onclick=\"Values_share("+obj.id+","+obj.owner+","+obj.pid+");\" class=\"btn btn-primary btn-circle\">" +
            "               <i class=\"fas fa-share\"></i>" +
            "           </a>"+
            "       </td>" +
            "       <td><span class=\"h5 m-0 text-dark\">"+ obj.time +"</span></td>" +
            "   </tr>";
    }
</script>

</html>